<template>
  <button class="back-button" @click="handleBack" aria-label="返回上一页">
    <i class="arrow-icon"></i>
    <span class="back-text">{{ text }}</span>
  </button>
</template>

<script setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";

// 定义接收的props，文字描述为必填项
const props = defineProps({
  text: {
    type: String,
    required: true,
    default: "返回",
    description: "",
  },
});

// eslint-disable-next-line vue/no-setup-props-destructure
const { text } = props;

const router = useRouter();

const handleBack = () => {
  router.go(-1);
};
</script>

<style scoped>
.back-button {
  float: left;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  /* background-color: #f5f7fa;
  border: 1px solid #e4e7ed; */
  border-radius: 4px;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  /* transition: all 0.2s ease; */
}

.arrow-icon {
  position: relative;
  width: 24px;
  height: 24px;
  background-image: url("../../../assets/images/user/back.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  /* background-color: #001a40; */
}

.back-text {
  white-space: nowrap;
  font-size: 20px;
  font-weight: 700;
}
</style>
